移动端使用html5 video标签问题总结

发表于 | 阅读次数:

1、解决在webview视频无法自动播放问题。
由于浏览器的限制，在webview中使用video标签，使用了autoplay属性，发现无法实现自动播放的需求，但是这个限制后面应该是解除了，不过针对的貌似是本地视频的自动播放，也就是说如果你播放的是本地视频，可以实现自动播放。那通过线上链接访问视频肯定需要原生端配置一些参数的，具体配置如下：

1
2
3
4
5
6
7
8
9
10
11
/* ios WKWebView */
WKWebViewConfiguration* conf = [[WKWebViewConfiguration alloc]init];
    if (@available(iOS 9.0, *)) {
        conf.requiresUserActionForMediaPlayback = NO;
    } else {
        conf.mediaPlaybackRequiresUserAction = NO;
    }
[conf.preferences setValue:@(YES) forKey:@"allowFileAccessFromFileURLs"];

/* Android WKWebView */
webView.getSettings().setMediaPlaybackRequiresUserGesture(false);

2、ios视频自动播放禁用全屏问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 配置该参数 */
conf.allowsInlineMediaPlayback = YES;

/* 前端同时配置该属性 */
<video
    src={item.contentUrl}
    poster={defaultPoster}
    muted
    loop
    autoPlay
    webkit-playsinline="true"
    playsInline="true"
/>

3、一些ios设备上存在视频无法显示，手指触碰后显示问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* bad */
<video
    src="//..."
    poster={defaultPoster}
    muted
    loop
    autoPlay
    webkit-playsinline="true"
    playsInline="true"
/>

/* good */
<video
    src="//..."
    poster={defaultPoster}
    muted
    loop
    autoPlay
    webkit-playsinline="true"
    playsInline="true"
>
    <source src="//..." />
</video>

4、video.play()是否支持问题。

1
2
3
4
5
6
7
8
9
const playPromise = currentVideoEle.play();
if (playPromise !== undefined) {
    playPromise.then(() => {
        console.log('play');
    }).catch((error) => {
        console.log(error);
        currentVideoEle.setAttribute('controls', 'controls');
    });
}

5、待续…